<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>H5自定义属性</title>
	</head>
	<body>
		<!-- 在我们的前端开发中，我们经常会用到自定义属性进行数据的传递 -->
		<!-- <div username='dazhou'  sex='nan'></div> -->
		<div data-username='dazhou'  data-sex='nan' data-city-name='beijing'></div>
		<script>
			var myDiv = document.querySelector('div');
			// console.log(myDiv.getAttribute('username'));
			console.log(myDiv.getAttribute('data-username'));
			// 所以在H5中统一规范了自定义属性的写法，必须以data-开头
			// H5获取属性的方法
			console.log(myDiv.dataset);
			console.log(myDiv.dataset.username);
			console.log(myDiv.dataset.cityName);
			console.log(myDiv.dataset['username']);
			console.log(myDiv.dataset['cityName']);
			
		</script>
	</body>
</html>